import React, { Component } from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'
import MessageDetail from './message-detail'

export default class Message extends Component {
    state = {
        messages: []
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                messages: [
                    {
                        id: 1,
                        title: 'msg1'
                    },
                    {
                        id: 2,
                        title: 'msg2'
                    },
                    {
                        id: 3,
                        title: 'msg3'
                    },
                    {
                        id: 4,
                        title: 'msg4'
                    }
                ]
            })
        }, 1000)
    }
    showDetail = (id)=>{
        this.props.history.push(`/about/msg/detali/${id}`)
    }
    showDetailReplace = (id)=>{
        this.props.history.replace(`/about/msg/detali/${id}`)
    }
    back= ()=>{ 
        this.props.history.goBack()
    }
    forward= ()=>{ 
        this.props.history.goForward()
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messages.map((item, index) => {
                            return (
                                <li key={index}>
                                    <NavLink to={`/about/msg/detali/${item.id}`}>{item.title}</NavLink>
                                    {/** 向回调函数传递自定义参数的方法，默认传递的参数是Event */}
                                    <button onClick={()=>{this.showDetail(item.id)}} type="button" className="btn btn-default">push查看</button>
                                    <button onClick={()=>{this.showDetailReplace(item.id)}} type="button" className="btn btn-default">replace查看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="btn-toolbar" role="toolbar">
                    <button type="button" className="btn btn-default"onClick={this.back} >回退</button>
                    <button type="button" className="btn btn-default"onClick={this.forward} >前进</button> 
                </div>
                <hr/>
                <Route path='/about/msg/detali/:id' component={MessageDetail}/>
            </div>
        )
    }
}
